<template>
  <view class="result-container">
    <!-- 结果图片 -->
    <view class="result-image-container">
      <!-- <image :src="resultImage" class="result-image" mode="widthFix"></image> -->
    </view>

    <view>
      <!-- 结果文本 -->
      <view class="result-text-container"
        style="align-content: center;text-align: center;min-height: 40vh;display: flex; flex-direction: column; justify-content: center;"
        :style="{backgroundColor:resultData.style.backgroundColor}">
        <text class="result-text"
          style="font-size: 60rpx;font-weight: 900;color: black;background-color: #FFD700;">{{ resultData.trait+"\n" }}</text>
        <text class="result-text"
          style="font-size: 40rpx;font-weight: 900;color: black;">{{ resultData.types+"\n" }}</text>
      </view>

      <view v-if="resultData.additional">
        <text class="result-text"
          style="text-align:left;font-size: 22rpx;padding: 10rpx 20rpx;">{{ "●"+resultData.additional }}</text>
      </view>
    </view>

    <button class="detail-btn" style="line-height: 2.55555556;" @click="openDetailLink">了解详情</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        resultImage: '',
        resultData: {
          style: {
            backgroundColor: "red"
          }
        }
      };
    },
    methods: {
      openDetailLink() {

        const link = '/pages/index/index';
        // 替换为实际的外部链接URL
        uni.switchTab({
          url: link,
          fail(err) {
            uni.redirectTo({
              url: link
            });
          }
        });
      }
    },
    onLoad(options) {

      // 解析URL参数中的结果数据
      if (options.data) {
        const resultData = JSON.parse(decodeURIComponent(options.data));
        console.log(resultData);
        this.resultData = resultData;
      }
    }
  };
</script>

<style scoped>
  .result-container {
    /* padding: 40rpx; */
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    background-color: #F5F5F5;
  }

  .result-image-container {
    margin-bottom: 60rpx;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .result-image {
    max-width: 80%;
    border-radius: 16rpx;
  }

  .result-text-container {
    width: 100%;
    padding: 0 20rpx;
    margin-bottom: 60rpx;
  }

  .result-text {
    font-size: 32rpx;
    color: #666666;
    /* 灰色字体 */
    line-height: 1.6;
    text-align: center;
  }

  .detail-btn {
    width: 80%;
    height: 80rpx;
    background-color: #000000;
    color: #ffffff;
    font-size: 32rpx;
    border-radius: 0rpx;
    border: none;
    margin-top: 100rpx;
  }
</style>